<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../libs/vue.js"></script>
    <link rel="stylesheet" href="../libs/animate.css">
    <style>
        .box{
            width:200px;
            height: 200px;
            background: darkcyan;
            color: #dfdfdf;
        }
        table{
            border:1px solid #999;
            background: deeppink;
            color:#fff;
        }
        tr td{
            border:1px solid #999;
            padding:10px;
        }
        ul{
            background: darkgoldenrod;
            width:40%;
        }
        .zoom-enter-active{
            animation: zoomInDown 1s;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1s;
        }
        .slot{
            width:50%;
            margin-top: 20px;
            border: 1px solid darkmagenta;
            border-radius: 10px;
            padding:30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>  {{title }} </h2>
        <h2>msg == {{msg }}</h2>
        <m-head></m-head>
        <h2> {{toggle?'明天早自习正常':'明天不上晚自习'}}</h2>
        <hr>
        <base-check v-model="toggle"  ></base-check>
        <base-text v-model="msg" ></base-text>
    </div>

    <template id="check">
        <div>
            <input type="checkbox" :checked="flag" @change="change" >请选择 
        </div>
    </template>


    <template id="text">
        <div>
            <input type="text" placeholder="请输入" :value="msg" @input="changemessage" >
        </div>
    </template>


    <script>
        // 全局注册
        const bus = new Vue()   // $emit $on $once 
        Vue.component("mHead",{
            template:"<header>Head - Head - wh2116daydayup </header>"
        })

        Vue.component("base-check",{
            model:{
                prop:'flag',
                event:"todochange"  
            },
            props:{
                flag:Boolean  // 父改子
            },
            template:"#check",
            methods:{
                change(e){
                    // 自定义事件 
                    this.$emit('todochange',e.target.checked)
                }
            }
        })

        Vue.component("base-text",{
            template:"#text",
            props:{
                msg:String,
            },
            model:{
                prop:'msg',
                event:"yydsdaydayup",
            },
            methods:{
                changemessage(e){
                    this.$emit("yydsdaydayup",e.target.value)
                }
            }
        })
        const vm = new Vue({
            data:{
                title:"Vue  组件使用 v-model ",
                msg:'wh2116-daydayup',
                html:"<h2> 4.1 节日快乐 </h2>",
                toggle:true 
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title 
            }
        }).$mount("#app")
    </script>
     <!-- 
        组件使用 v-model 
        v-model 用于组件(组件上必须带Input )
         父改子 props
         子改父 自定义事件 
     -->
</body>
</html>


